技能测试：背景与边框

本技能测试的目的是评估你是否完全理解了 CSS 中的背景和边框教程的内容。

**备注：**你可以在下面的互动编辑器中尝试解决方案。然而，下载代码并使用在线工具，如 CodePen、jsFiddle 或 Glitch 来完成任务可能会有所帮助。

如果你遇到了困难，可以通过沟通渠道联系我们。

In this article

• 任务 1
• 任务 2

[

Frontend development career path by ScrimbaA structured program to help you go from beginner to job-ready.Get started

](https://developer.mozilla.org/pong/click?code=aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2NsaWNrL3gvR1RORDQyN1VDWUJJS0szTkY2U0xZS1FVQ0FTSTQySk1DNllJUFozSkNBU0k1SzdFQzZBRDYyN0tDNlNEQ0szVUNUQUlUMjNXQ1k3RDY1UUlDVlNEQzJRTUhFWUk1MjdOQ1lZSVQ1M0VDVE5DWUJaNTJL.XiKt3%2FGes1sb6m6rINI74SpIUdFi1ZlYp8DUrQlFWsU%3D&version=2)Ad

任务 1

在这个任务中，我们希望你能为一个页面的标题添加背景、边框和一些简单的样式：

1. 令这个盒子的边框宽度为 5px，且为黑色实心（solid）的，圆角半径为 10px。
2. 添加背景图片（使用 balloons.jpg URL），调整它的大小，令其覆盖整个盒子。
3. 给予 <h2> 一个半透明的黑色背景颜色，并使文本为白色。

你的最终结果看起来应该如下图所示：

尝试更新下面的实时代码，重现完成的示例：

htmlCopyPlay

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

cssCopyPlay

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

Play

任务 2

在这个任务中，我们希望你为一个装饰性的盒子添加背景图片、边框和其他一些样式：

• 给这个盒子加一个 5px 的淡蓝色（lightblue）边框，设定左上角圆角半径为 20px，右下角圆角半径为 40px。
• 标题使用 star.png 图像作为背景图像，左边是一颗居中的星星，右边是重复的星星图案。
• 确保标题文本不覆盖图像，并且居中——你将需要使用在以前的课程中学到的技术来实现这一点。

你的最终结果看起来应该如下图所示：

尝试更新下面的实时代码，重现完成的示例：

htmlCopyPlay

<div class="box">
  <h2>Backgrounds & Borders</h2>
</div>

cssCopyPlay

.box {
  /* Add styles here */
}

h2 {
  /* Add styles here */
}

Play